<template>
  <div id="login">
    <headers></headers>
    <div class="box">
      <div class="content">
        <div id="loginBox">
          <form @submit.prevent="login()">
            <div class="title">用户登录</div>
            <div class="phone">
              <div class="box">
                <div class="small-box">
                  <input
                    type="text"
                    placeholder="手机号"
                    @blur="handlerPhone()"
                    v-model="phoneVal"
                    :class="{ 'error-input': phoneError }"
                  />
                  <span>
                    <img src="@/assets/img/login/user.png" />
                  </span>
                </div>
                <div class="phone-tip" v-if="phoneError">{{ phoneTip }}</div>
              </div>
            </div>
            <div class="text">
              <div class="phone-code">
                <div><input type="text" v-model="phoneCode"></div>
                <button type="button" @click="getCode()">获取验证码</button>
              </div>
            </div>
            <div class="ok"></div>
            <div></div>
            <button><span>登 录</span></button>
            <div style="font-size: 12px; margin-top: 10px; text-align: center">
              未注册手机验证后自动登录
            </div>
          </form>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import {getVerificationCode, getValue} from '@/api/index'
import headers from "@/components/header.vue";
import Footers from "@/components/footer.vue";
export default {
  components: { headers, Footers },
  data() {
    return {
      phoneVal: "",
      captchaVal: "",
      phoneError: false,
      phoneTip: "",
      phoneCode: ""
    };
  },
  methods: {
    handlerPhone() {
      if (this.phoneVal === "") {
        this.phoneError = true;
        this.phoneTip = "请输入手机号";
        return false;
      }

      // 简单的手机号格式验证（11位数字，1开头）
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.phoneVal)) {
        this.phoneError = true;
        this.phoneTip = "请输入正确的手机号!";
        return false;
      }

      this.phoneError = false;
      this.phoneTip = "";
      return true;
    },
    getCode() {
      if(!this.handlerPhone()) {
        
        return false;
      }
      try {
        getVerificationCode({mobile:this.phoneVal,type:12})
      } catch (error) {
        console.log(error);
      }
      
    },
    async login() {
      if(!this.handlerPhone()) {
        return false;
      }
      if(this.phoneCode == "") {
        this.$message({
          message: '验证码不能为空!',
          type: 'warning',
          offset: 60
        });
        return false;
      }
      try {
        let {result: {userInfo}} = await getValue({appType: 1,deviceToken: 0,mobile: this.phoneVal,verificationCode: this.phoneCode})
        
        localStorage.setItem("userInfo",JSON.stringify(userInfo));
        this.$message({
          message: '登录成功!',
          type: 'success'
        });
        this.$router.push('/home')
      } catch (error) {
        console.log(error);
        this.$message.error('验证码错误');
      }
    }
  },
};
</script>

<style scoped>
#login {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  font-family: "Microsoft yahei", Verdana, Arial, Helvetica, sans-serif;
}
p {
  margin: 0;
}
#login > .box {
  align-items: center;
  display: flex;
  height: 600px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  background-image: url("@/assets/img/login/back.png");
}
#login > .box > .content {
  width: 1100px;
  display: flex;
  justify-content: flex-end;
}
#loginBox {
  width: 300px;
  padding: 20px 25px 48px;
  background-color: #fff;
  box-shadow: 0 0 20px #d9d9d9;
  z-index: 999;
}
#loginBox > form {
  width: 100%;
  height: 100%;
}
#loginBox > form > .title {
  height: 27px;
  width: 300px;
  color: #313131;
  font: 400 18px / 30px "Microsoft Yahei";
  margin-bottom: 15px;
  text-align: start;
}
#loginBox > form > .phone {
  margin-top: 27px;
  margin-bottom: 21px;
}
#loginBox > form > .phone > .box {
  line-height: 40px;
  position: relative;
}
#loginBox > form > .phone > .box > .small-box {
  position: relative;
  display: inline-block;
  width: 100%;
}
#loginBox > form > .phone > .box > .small-box > input {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  width: 100%;
  padding-left: 30px;
  font-size: 14px;
  height: 38px;
  line-height: 38px;
}
#loginBox > form > .phone > .box > .small-box > span {
  height: 100%;
  position: absolute;
  left: 5px;
  color: #c0c4cc;
  display: flex;
  top: 0;
  align-items: center;
}
#loginBox > form > .phone > .box > .small-box > span > img {
  width: 25px;
  height: 25px;
}
.error-input {
  border-color: #f56c6c !important;
}
.phone-tip {
  font-size: 12px;
  margin-top: 1px;
  color: #f56c6c;
  left: 0;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
}
#loginBox > form > .text {
  margin-bottom: 21px;
}
#loginBox > form > button {
  height: 38px;
  margin-top: 20px;
  background-color: #0099a8;
  border: none;
  border-radius: 0;
  letter-spacing: 0.32px;
  text-align: center;
  width: 100%;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: 12px 20px;
  line-height: 1;
}
</style>
